<template>
	<!-- 复制该文件到components,并在全局或者所需页面引入 -->
	<div class="mask" :style="{ background: mask ? maskBackground : '' }" :class="mask ? 'mask-show' : ''"
		@click="aClose" v-show="loading" :tabMask="tabMask" :navMask="navMask">
		<!-- 加载动画开始 需要替换的内容：从loading?.vue中复制替换以下内容 -->
		<!-- 动画 4 -->
		<div class="loader-ring">
			<!-- <img class="bg" mode="widthFix"  src="@/assets/loading.gif" /> -->
			<!-- <div class="cube4sides">
				<div class="cube">
					<div class="face1"></div>
					<div class="face2"></div>
					<div class="face3"></div>
					<div class="face4"></div>
					<div class="face5"></div>
					<div class="face6"></div>
				</div>
			</div> -->
			<!-- <div class="loader"></div> -->
			<svg class="pl" width="240" height="240" viewBox="0 0 240 240"> 	<circle class="pl__ring pl__ring--a" cx="120" cy="120" r="105" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 660" stroke-dashoffset="-330" stroke-linecap="round"></circle> 	<circle class="pl__ring pl__ring--b" cx="120" cy="120" r="35" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 220" stroke-dashoffset="-110" stroke-linecap="round"></circle> 	<circle class="pl__ring pl__ring--c" cx="85" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle> 	<circle class="pl__ring pl__ring--d" cx="155" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle> </svg>
			<!--      <div class='loader-ring-light'></div>-->
			<!--      <div class="text">请稍等<span class="dot">...</span></div>-->
		</div>

		<!-- 加载动画结束 -->

		<!-- 文字提示 -->
		<div class="title" :style="{
                color: titleColor,
                fontSize: titleSize,
                marginTop: titleTop
            }">
			{{ title }}
		</div>
	</div>
</template>

<script scoped="true">
	export default {
		name: 'a-loading',
		props: {
			//遮罩层 true有 false无
			mask: {
				type: Boolean,
				default: true
			},
			// 遮罩颜色
			maskBackground: {
				type: String,
				default: 'rgba(255, 255, 255, 0)'
			},
			//点击遮罩是否可关闭  true可以 false不行
			isClick: {
				type: Boolean,
				default: false
			},
			// 提示文字内容
			title: {
				type: String,
				default: ''
			},
			//提示文字颜色
			titleColor: {
				type: String,
				default: '#fff'
			},
			//提示文字大小
			titleSize: {
				type: String,
				default: '28rpx'
			},
			//提示文字距离动画位置
			titleTop: {
				type: String,
				default: ''
			},
			// 是否显示原生底部遮罩
			tabMask: {
				type: Boolean,
				default: true
			},
			// 是否显示原生导航遮罩
			navMask: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				// 加载动画显示隐藏
				show: this.$store.state.data.Loading,
				// 原生底部遮罩
				tabdivObj: null,
				// 原生导航栏遮罩
				navbardivObj: null
			}
		},
		watch: {
			loading: {
				handler(newVal, oldVal) {
					// #ifdef APP-PLUS
					if (newVal) {
						// this.open()
					} else {
						// this.close();
					}

					// #endif
				},
				deep: true
			}
		},

		created() {},
		mounted() {
			if (this.loading) {
				// this.open()
			}
		},
		computed: {
			loading() {
				return this.$store.state.data.Loading 
			}
		},
		methods: {
			// 点击遮罩关闭加载动画
			aClose() {
				if (this.isClick) {
					// #ifdef APP-PLUS
					this.close()

					// #endif
				}
			},
			// 打开加载动画
			open() {
				// #ifdef APP-PLUS
				if (this.tabMask && this.mask) {
					this.bottonMask()
				}
				if (this.navMask && this.mask) {
					this.navbarMask()
				}

				// #endif
			},
			// 关闭加载动画
			close() {
				if (this.tabMask && this.mask) {
					this.tabdivObj.hide() //隐藏原生遮罩
				}
				if (this.navMask && this.mask) {
					this.navbardivObj.hide() //隐藏原生遮罩
				}
			},
			// 原生底部遮罩、
			bottonMask() {
				// #ifdef APP-PLUS
				this.tabdivObj = new plus.nativeObj.div('divObj', {
					bottom: '0px',
					left: '0px',
					height: '50px',
					width: '100%',
					backgroundColor: this.maskBackground
				})
				this.tabdivObj.show() //显示原生遮罩

				// #endif
			},
			// 原生顶部导航遮罩
			navbarMask() {
				// #ifdef APP-PLUS
				this.navbardivObj = new plus.nativeObj.div('divObj', {
					top: '0px',
					left: '0px',
					height: uni.getSystemInfoSync().statusBarHeight + 45 + 'px',
					width: '100%',
					backgroundColor: this.maskBackground
				})
				this.navbardivObj.show() //显示原生遮罩

				// #endif
			}
		}
	}
</script>

<style  lang="scss" scoped>
	/* 加载动画 */
	.loadingBox {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cube4sides {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.cube {
		position: relative;
		width: 20px;
		height: 20px;
		transform-style: preserve-3d;
		animation: rotate-cube 2s infinite;
	}

	.face1,
	.face2,
	.face3,
	.face4,
	.face5,
	.face6 {
		position: absolute;
		width: 20px;
		height: 20px;
		background-color: transparent;
		border: 1px solid #00BFFF;
		box-sizing: border-box;
	}

	.face1 {
		transform: rotateY(0deg) translateZ(25px);
		animation: change-color 2s infinite;
	}

	.face2 {
		transform: rotateX(90deg) translateZ(25px);
	}

	.face3 {
		transform: rotateY(90deg) translateZ(25px);
		animation: change-color 2s infinite;
	}

	.face4 {
		transform: rotateY(180deg) translateZ(25px);
		animation: change-color 2s infinite;
	}

	.face5 {
		transform: rotateX(-90deg) translateZ(25px);
	}

	.face6 {
		transform: rotateY(-90deg) translateZ(25px);
		animation: change-color 2s infinite;
	}

	@keyframes rotate-cube {
		from {
			transform: rotateX(0deg) rotateY(0deg);
		}

		to {
			transform: rotateX(360deg) rotateY(360deg);
		}
	}

	@keyframes change-color {
		0% {
			background-color: #00BFFF;
		}

		25% {
			background-color: #FF1493;
		}

		50% {
			background-color: #32CD32;
		}

		75% {
			background-color: #FFA500;
		}

		100% {
			background-color: #00BFFF;
		}
	}


	.loader-pulse {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: #8f44fd;
		animation: load-pulse 0.85s infinite linear;
	}

	@keyframes load-pulse {
		0% {
			transform: scale(0.15);
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			transform: scale(1);
			opacity: 0;
		}
	}

	.ring {
		height: 25px;
		width: 25px;
		background: transparent;
		border: red 2px solid;
		border-top: transparent;
		border-radius: 50%;
		animation: animate81323 0.8s linear infinite;
	}

	@keyframes animate81323 {
		0% {
			border: 2px solid rgb(255, 75, 75);
			border-top: transparent;
			border-left: transparent;
			transform: rotate(0deg);
		}

		50% {
			border: 2px dashed rgb(240, 41, 240);
			border-top: transparent;
			border-left: transparent;
			transform: rotate(270deg);
		}

		100% {
			border: 2px dotted rgb(28, 228, 28);
			border-top: transparent;
			border-left: transparent;
			transform: rotate(360deg);
		}
	}


	@keyframes ldio-4j5ay0xf86g {
		0% {
			opacity: 1
		}

		100% {
			opacity: 0
		}
	}

	.ldio-4j5ay0xf86g view {
		left: 23px;
		top: 23px;
		position: absolute;
		animation: ldio-4j5ay0xf86g linear 1s infinite;
		background: #fe718d;
		width: 3px;
		height: 6px;
		border-radius: 1.5px / 3px;
		transform-origin: 1.5px 13px;
	}

	.ldio-4j5ay0xf86g view:nth-child(1) {
		transform: rotate(0deg);
		animation-delay: -0.9166666666666666s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(2) {
		transform: rotate(30deg);
		animation-delay: -0.8333333333333334s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(3) {
		transform: rotate(60deg);
		animation-delay: -0.75s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(4) {
		transform: rotate(90deg);
		animation-delay: -0.6666666666666666s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(5) {
		transform: rotate(120deg);
		animation-delay: -0.5833333333333334s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(6) {
		transform: rotate(150deg);
		animation-delay: -0.5s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(7) {
		transform: rotate(180deg);
		animation-delay: -0.4166666666666667s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(8) {
		transform: rotate(210deg);
		animation-delay: -0.3333333333333333s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(9) {
		transform: rotate(240deg);
		animation-delay: -0.25s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(10) {
		transform: rotate(270deg);
		animation-delay: -0.16666666666666666s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(11) {
		transform: rotate(300deg);
		animation-delay: -0.08333333333333333s;
		background: #fe718d;
	}

	.ldio-4j5ay0xf86g view:nth-child(12) {
		transform: rotate(330deg);
		animation-delay: 0s;
		background: #fe718d;
	}

	.loadingio-spinner-spinner-977el9wwy2v {
		width: 50px;
		height: 50px;
		display: inline-block;
		overflow: hidden;
	}

	.ldio-4j5ay0xf86g {
		width: 100%;
		height: 100%;
		position: relative;
		transform: translateZ(0) scale(1);
		backface-visibility: hidden;
		transform-origin: 0 0;
		/* see note above */
	}

	.ldio-4j5ay0xf86g view {
		box-sizing: content-box;
	}

	/* 遮罩样式 */
	.mask {
		position: fixed;
		z-index: 99999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	/* 动画样式 开始 （以下是需要替换内容）*/
	.loader-ring {
		background-color: #fffffe;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 50%为自身尺寸的一半 */
		width: 150px;
		height: 150px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	}

	.bg {
		transform: translate(-50%, -50%);
		/* 50%为自身尺寸的一半 */
		position: absolute;
		top: 50%;
		left: 50%;
		height: 100%;
		width: 100%;
	}

	.loader-ring-light {
		width: 60px;
		height: 60px;
		-moz-border-radius: 120px;
		-webkit-border-radius: 120px;
		border-radius: 120px;
		-moz-box-shadow: 0 2px 0 #ff856d inset;
		-webkit-box-shadow: 0 2px 0 #ff856d inset;
		box-shadow: 0 2px 0 #ff856d inset;
		animation: rotate-360 2s linear infinite;
	}

	@keyframes dot {

		/*动态改变显示宽度, 但始终让总占据空间不变, 避免抖动*/
		0% {
			width: 0;
			margin-right: 1.2em;
		}

		33% {
			width: 0.4em;
			margin-right: 0.8em;
		}

		66% {
			width: 0.8em;
			margin-right: 0.4em;
		}

		100% {
			width: 1.2em;
			margin-right: 0;
		}
	}

	.loader-ring-track {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 50%为自身尺寸的一半 */
		width: 60px;
		height: 60px;
		-moz-border-radius: 120px;
		-webkit-border-radius: 120px;
		border-radius: 120px;
		-moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3) inset;
		-webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3) inset;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3) inset;
	}

	@keyframes rotate-360 {
		from {
			-moz-transform: rotate(0);
			-ms-transform: rotate(0);
			-webkit-transform: rotate(0);
			transform: rotate(0);
		}

		to {
			-moz-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	.loader  {
	   width: 48px;
	   height: 48px;
	   margin: auto;
	   position: relative;
	   
	}
	 .loader:before  {
	   content: '';
	   width: 48px;
	   height: 5px;
	   background: #f0808050;
	   position: absolute;
	   top: 60px;
	   left: 0;
	   border-radius: 50%;
	   animation: shadow324 0.5s linear infinite;
	   
	}
	 .loader:after  {
	   content: '';
	   width: 100%;
	   height: 100%;
	   background: #f08080;
	   position: absolute;
	   top: 0;
	   left: 0;
	   border-radius: 4px;
	   animation: jump7456 0.5s linear infinite;
	   
	}
	 @keyframes jump7456  {
	   15%  {
	   border-bottom-right-radius: 3px;
	   
	}
	 25%  {
	   transform: translateY(9px) rotate(22.5deg);
	   
	}
	 50%  {
	   transform: translateY(18px) scale(1, .9) rotate(45deg);
	   border-bottom-right-radius: 40px;
	   
	}
	 75%  {
	   transform: translateY(9px) rotate(67.5deg);
	   
	}
	 100%  {
	   transform: translateY(0) rotate(90deg);
	   
	}
	 
	}
	 @keyframes shadow324  {
	   0%, 100%  {
	   transform: scale(1, 1);
	   
	}
	 50%  {
	   transform: scale(1.2, 1);
	   
	}
	 
	}
	.pl  {
	   width: 6em;
	   height: 6em;
	   
	}
	 .pl__ring  {
	   animation: ringA 2s linear infinite;
	   
	}
	 .pl__ring--a  {
	   stroke: #f42f25;
	   
	}
	 .pl__ring--b  {
	   animation-name: ringB;
	   stroke: #f49725;
	   
	}
	 .pl__ring--c  {
	   animation-name: ringC;
	   stroke: #255ff4;
	   
	}
	 .pl__ring--d  {
	   animation-name: ringD;
	   stroke: #f42582;
	   
	}
	 /* Animations */ @keyframes ringA  {
	   from, 4%  {
	   stroke-dasharray: 0 660;
	   stroke-width: 20;
	   stroke-dashoffset: -330;
	   
	}
	 12%  {
	   stroke-dasharray: 60 600;
	   stroke-width: 30;
	   stroke-dashoffset: -335;
	   
	}
	 32%  {
	   stroke-dasharray: 60 600;
	   stroke-width: 30;
	   stroke-dashoffset: -595;
	   
	}
	 40%, 54%  {
	   stroke-dasharray: 0 660;
	   stroke-width: 20;
	   stroke-dashoffset: -660;
	   
	}
	 62%  {
	   stroke-dasharray: 60 600;
	   stroke-width: 30;
	   stroke-dashoffset: -665;
	   
	}
	 82%  {
	   stroke-dasharray: 60 600;
	   stroke-width: 30;
	   stroke-dashoffset: -925;
	   
	}
	 90%, to  {
	   stroke-dasharray: 0 660;
	   stroke-width: 20;
	   stroke-dashoffset: -990;
	   
	}
	 
	}
	 @keyframes ringB  {
	   from, 12%  {
	   stroke-dasharray: 0 220;
	   stroke-width: 20;
	   stroke-dashoffset: -110;
	   
	}
	 20%  {
	   stroke-dasharray: 20 200;
	   stroke-width: 30;
	   stroke-dashoffset: -115;
	   
	}
	 40%  {
	   stroke-dasharray: 20 200;
	   stroke-width: 30;
	   stroke-dashoffset: -195;
	   
	}
	 48%, 62%  {
	   stroke-dasharray: 0 220;
	   stroke-width: 20;
	   stroke-dashoffset: -220;
	   
	}
	 70%  {
	   stroke-dasharray: 20 200;
	   stroke-width: 30;
	   stroke-dashoffset: -225;
	   
	}
	 90%  {
	   stroke-dasharray: 20 200;
	   stroke-width: 30;
	   stroke-dashoffset: -305;
	   
	}
	 98%, to  {
	   stroke-dasharray: 0 220;
	   stroke-width: 20;
	   stroke-dashoffset: -330;
	   
	}
	 
	}
	 @keyframes ringC  {
	   from  {
	   stroke-dasharray: 0 440;
	   stroke-width: 20;
	   stroke-dashoffset: 0;
	   
	}
	 8%  {
	   stroke-dasharray: 40 400;
	   stroke-width: 30;
	   stroke-dashoffset: -5;
	   
	}
	 28%  {
	   stroke-dasharray: 40 400;
	   stroke-width: 30;
	   stroke-dashoffset: -175;
	   
	}
	 36%, 58%  {
	   stroke-dasharray: 0 440;
	   stroke-width: 20;
	   stroke-dashoffset: -220;
	   
	}
	 66%  {
	   stroke-dasharray: 40 400;
	   stroke-width: 30;
	   stroke-dashoffset: -225;
	   
	}
	 86%  {
	   stroke-dasharray: 40 400;
	   stroke-width: 30;
	   stroke-dashoffset: -395;
	   
	}
	 94%, to  {
	   stroke-dasharray: 0 440;
	   stroke-width: 20;
	   stroke-dashoffset: -440;
	   
	}
	 
	}
	 @keyframes ringD  {
	   from, 8%  {
	   stroke-dasharray: 0 440;
	   stroke-width: 20;
	   stroke-dashoffset: 0;
	   
	}
	 16%  {
	   stroke-dasharray: 40 400;
	   stroke-width: 30;
	   stroke-dashoffset: -5;
	   
	}
	 36%  {
	   stroke-dasharray: 40 400;
	   stroke-width: 30;
	   stroke-dashoffset: -175;
	   
	}
	 44%, 50%  {
	   stroke-dasharray: 0 440;
	   stroke-width: 20;
	   stroke-dashoffset: -220;
	   
	}
	 58%  {
	   stroke-dasharray: 40 400;
	   stroke-width: 30;
	   stroke-dashoffset: -225;
	   
	}
	 78%  {
	   stroke-dasharray: 40 400;
	   stroke-width: 30;
	   stroke-dashoffset: -395;
	   
	}
	 86%, to  {
	   stroke-dasharray: 0 440;
	   stroke-width: 20;
	   stroke-dashoffset: -440;
	   
	}
	 
	}

	/* 动画样式结束 */
</style>